<gm:page title="Position Couche Superposition avec z-index" authenticate="false">
 
  
     <!-- z-index (Position de la couche en cas de superposition)
 
     Cette mention est appropriée en relation avec plusieurs mentions sur 
     le  Mode de positionnement. 
 
     Quand vous positionnez de façon absolue plusieurs éléments dont les 
     domaines d'affichage se superposent, les éléments sont en principe 
     affichés l'un sur l'autre dans l'ordre dans lequel ils ont été définis.
 
     Vous pouvez modifier cet ordre en affectant aux différents éléments des
     numéros. 
 
     Les éléments dont le numéro est le plus élevé couvrent les éléments
     avec le numéro le moins élevé.
 
 
     Explication:
 
     Avec "z-index:" vous pouvez spécifier l'ordre dans lequel des éléments
     se superposent. 
 
     Notez un nombre pour chaque élément pour lequel vous voulez fixer 
     clairement la position de la couche. 
 
     Plus le chiffre est élevé plus l'élément sera placé vers l'avant, plus
     il est bas plus l'élément sera placé derrière en arrière plan.
 
     Dans l'exemple ci-dessous, le même passage a été créé quatre fois - 
     avec pour contenu une image GIF transparente. 
 
     Les passages se chevauchent en raison des mentions sur leur 
     positionnement et des dimensions extérieures de l'image. 
 
     Normalement, le dernier passage noté recouvre tous les autres étant 
     donné qu'il est noté en dernier. 
 
     Dans l'exemple pourtant, c'est le deuxième passage qui recouvre tous 
     les autres, car il reçoit le numéro z-index le plus élevé. -->
 
 
     <!-- Déclaration fonction -->
     <HEAD>
 
                                               
     </HEAD>
  
     <!-- Appel fonction -->
 
     <BODY bgcolor="FFFFFF" text="#000000">
 
     <div style="position:absolute; top:100px; left:100px; z-index:1; border:thin solid #804000;"> 
     <b>1.</b>
     <IMG src="./resources/chien.gif" width="208" height="181" border="0" alt="chien">
     </div>
 
     <div style="position:absolute; top:130px; left:150px; z-index:4; border:thin solid #804000;">
     <b>2.</b>
     <IMG src="./resources/chien.gif" width="208" height="181" border="0" alt="chien">
     </div>
 
     <div style="position:absolute; top:160px; left:200px; z-index:2; border:thin solid #804000;">
     <b>3.</b>
     <IMG src="./resources/chien.gif" width="208" height="181" border="0" alt="chien">
     </div>
 
     <div style="position:absolute; top:190px; left:250px; z-index:3; border:thin solid #804000;">
     <b>4.</b>
     <IMG src="./resources/chien.gif" width="208" height="181" border="0" alt="chien">
     </div>       
     </BODY>    
 
</gm:page>

 


